<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
</style>

<template>
    <div>
        <Row>
            <Card style="min-height: calc(100vh - 128px)">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tableMode" type="card" style="margin-bottom: 0" @on-click="switchTab">
                        <TabPane label="Portal" name="portal" icon="android-desktop"></TabPane>
                        <TabPane label="AAA认证" name="AAA" icon="key"></TabPane>
                        <TabPane label="DHCP" name="DHCP" icon="cloud"></TabPane>
                        <TabPane label="DNS" name="DNS" icon="steam"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="排序和过滤后的数据">
                            <Button type="primary" size="large" @click="exportData(2)"><Icon type="funnel"></Icon> </Button>
                        </Tooltip>
                        <Tooltip content="原始数据">
                            <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row v-show="tableMode==='portal'">
                    <Col span="24">
                        <Table :columns="portalColumns" :data="portalData" size="small" ref="portalTable"></Table>
                    </Col>
                </Row>
                <Row v-show="tableMode==='AAA'">
                    <Col span="24">
                        <Table :columns="AAAColumns" :data="AAAData" size="small" ref="AAAtable"></Table>
                    </Col>
                </Row>
                <Row v-show="tableMode==='DHCP'">
                    <Col span="24">
                        <Table :columns="DHCPColumns" :data="DHCPData" size="small" ref="DHCPtable"></Table>
                    </Col>
                </Row>
                <Row v-show="tableMode==='DNS'">
                    <Col span="24">
                        <Table :columns="DNSColumns" :data="DNSData" size="small" ref="DNStable"></Table>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import {
  portalData,
  portalColumns,
  AAAData,
  AAAColumns,
  DHCPData,
  DHCPColumns,
  DNSData,
  DNSColumns
} from "./data/services.js";

export default {
  name: "AC",
  data() {
    return {
      portalData,
      portalColumns,
      AAAData,
      AAAColumns,
      DHCPData,
      DHCPColumns,
      DNSData,
      DNSColumns,
      tableMode: "portal",
      csvFileName: "",
      excelFileName: "",
      tableExcel: {},
      fontSize: 16
    };
  },
  methods: {
    switchTab(name) {
      this.tableMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表"
        });
      } else if (type === 2) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表(排序和过滤后)",
          original: false
        });
      }
    }
  }
};
</script>

<style>

</style>
